﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <title></title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />

    <!-- Google fonts include -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900%7CYesteryear" rel="stylesheet">

    <!-- All Vendor & plugins CSS include -->
    <link href="assets/css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
<script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>
    <!-- Start Header Area -->
    <header class="header-area">
        <!-- main header start -->
        <div class="main-header d-none d-lg-block">
            <!-- header top start -->
            <div class="header-top bdr-bottom">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="welcome-message">
                                <p>Welcome to Floda online store</p>
                            </div>
                        </div>
                        <div class="col-lg-6 text-right">
                            <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
            <!-- header top end -->

            <!-- header middle area start -->
            <div class="header-main-area sticky">
                <div class="container">
                    <div class="row align-items-center position-relative">

                        <!-- start logo area -->
                        <div class="col-lg-3">
                            <div class="logo">
                                <a href="index.jsp">
                                    <img src="assets/img/logo/logo.png" alt="">
                                </a>
                            </div>
                        </div>
                        <!-- start logo area -->

                        <!-- main menu area start -->
                        <div class="col-lg-6 position-static">
                            <div class="main-menu-area">
                                <div class="main-menu">
                                    <!-- main menu navbar start -->
                                    <nav class="desktop-menu">
                                        <ul>
                                            <li><a href="index">主页</a></li>
                                            <li><a href="shop">商品列表</a></li>
                                            <li><a href="shop?goodsSex=1">男装</a></li>
                                            <li><a href="shop?goodsSex=0">女装</a></li>
                                            <%--                                            <li><a href="product-details.jsp">Product Details</a></li>--%>
                                        </ul>
                                    </nav>
                                    <!-- main menu navbar end -->
                                </div>
                            </div>
                        </div>
                        <!-- main menu area end -->

                        <!-- mini cart area start -->
                        <div class="col-lg-3">
                            <div class="header-configure-wrapper">
                                <div class="header-configure-area">
                                    <ul class="nav justify-content-end">
                                        <li>
                                            <a href="#" class="offcanvas-btn">
                                                <i class="lnr lnr-magnifier"></i>
                                            </a>
                                        </li>
                                        <li class="user-hover">
                                            <a href="#">
                                                <i class="lnr lnr-user"></i>
                                            </a>
                                            <ul class="dropdown-list">
                                                <c:if test="${user eq null}">
                                                    <li><a href="login.jsp">登录</a></li>
                                                    <li><a href="register.jsp">注册</a></li>
                                                </c:if>
                                                <c:if test="${user != null}">
                                                    <li><a href="mini">个人中心</a></li>
                                                    <li><a href="jump">退出登录</a></li>
                                                </c:if>
                                            </ul>
                                        </li>
<%--                                        <li>--%>
<%--                                            <a href="#">--%>
<%--                                                <i class="lnr lnr-heart"></i>--%>
<%--                                                <div class="notification">0</div>--%>
<%--                                            </a>--%>
<%--                                        </li>--%>
                                        <li>
                                            <a href="#" class="minicart-btn">
                                                <i class="lnr lnr-cart"></i>
                                                <div class="notification">2</div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- mini cart area end -->

                    </div>
                </div>
            </div>
            <!-- header middle area end -->
        </div>
        <!-- main header start -->

        <!-- mobile header start -->
        <div class="mobile-header d-lg-none d-md-block sticky">
            <!--mobile header top start -->
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12">
                        <div class="mobile-main-header">
                            <div class="mobile-logo">
                                <a href="index.jsp">
                                    <img src="assets/img/logo/logo.png" alt="Brand Logo">
                                </a>
                            </div>
                            <div class="mobile-menu-toggler">
                                <div class="mini-cart-wrap">
                                    <a href="#">
                                        <i class="lnr lnr-cart"></i>
                                    </a>
                                </div>
                                <div class="mobile-menu-btn">
                                    <div class="off-canvas-btn">
                                        <i class="lnr lnr-menu"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- mobile header top start -->
        </div>
        <!-- mobile header end -->
        </div>
    </header>
    <!-- end Header Area -->

    <!-- off-canvas menu start -->
    <aside class="off-canvas-wrapper">
        <div class="off-canvas-overlay"></div>
        <div class="off-canvas-inner-content">
            <div class="btn-close-off-canvas">
                <i class="lnr lnr-cross"></i>
            </div>

            <div class="off-canvas-inner">
                <!-- search box start -->
                <div class="search-box-offcanvas">
                    <form>
                        <input type="text" placeholder="Search Here...">
                        <button class="search-btn"><i class="lnr lnr-magnifier"></i></button>
                    </form>
                </div>
                <!-- search box end -->

                <!-- mobile menu start -->
                <div class="mobile-navigation">

                    <!-- mobile menu navigation start -->
                    <nav>
                        <ul class="mobile-menu">
                            <li><a href="index">主页</a></li>
                                            <li><a href="shop">商品</a></li>
                                            <li>商品详情</li>
                        </ul>
                    </nav>
                    <!-- mobile menu navigation end -->
                </div>
                <!-- mobile menu end -->

                <div class="mobile-settings">
                    <ul class="nav">
                        <li>
                            <div class="dropdown mobile-top-dropdown">
                                <a href="#" class="dropdown-toggle" id="currency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Currency
                                    <i class="fa fa-angle-down"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="currency">
                                    <a class="dropdown-item" href="#">$ USD</a>
                                    <a class="dropdown-item" href="#">$ EURO</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="dropdown mobile-top-dropdown">
                                <a href="#" class="dropdown-toggle" id="myaccount" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    My Account
                                    <i class="fa fa-angle-down"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="myaccount">
                                    <a class="dropdown-item" href="#">my account</a>
                                    <a class="dropdown-item" href="#"> login</a>
                                    <a class="dropdown-item" href="#">register</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>

                <!-- offcanvas widget area start -->
                <div class="offcanvas-widget-area">
                    <div class="off-canvas-contact-widget">
                        <ul>
                            <li><i class="fa fa-mobile"></i>
                                <a href="#">0123456789</a>
                            </li>
                            <li><i class="fa fa-envelope-o"></i>
                                <a href="#">info@yourdomain.com</a>
                            </li>
                        </ul>
                    </div>
                    <div class="off-canvas-social-widget">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-pinterest-p"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                        <a href="#"><i class="fa fa-youtube-play"></i></a>
                    </div>
                </div>
                <!-- offcanvas widget area end -->
            </div>
        </div>
    </aside>
    <!-- off-canvas menu end -->



    <!-- main wrapper start -->
    <main>
        <!-- breadcrumb area start -->
        <div class="breadcrumb-area common-bg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrap">
                            <nav aria-label="breadcrumb">
                                <h1>商品详情</h1>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="index"><i class="fa fa-home"></i></a></li>
                                    <li class="breadcrumb-item active" aria-current="page">商品详情</li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb area end -->

        <!-- page main wrapper start -->
        <div class="shop-main-wrapper section-space">
            <div class="container">
                <div class="row">
                    <!-- product details wrapper start -->
                    <div class="col-lg-12 order-1 order-lg-2">
                        <!-- product details inner end -->
                        <div class="product-details-inner">
                            <div class="row">
                                <div class="col-lg-5">
                                    <div class="product-large-slider">
                                        <div class="pro-large-img img-zoom">
                                            <img src="${goods.goodsImage}" alt="product-details" />
                                        </div>
                                    </div>
                                    <div class="pro-nav slick-row-10 slick-arrow-style">
                                        <div class="pro-nav-thumb">
                                            <img src="${goods.goodsImage}" alt="product-details" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="product-details-des">
                                        <h3 class="product-name">${goods.goodsName}</h3>
                                        <div class="ratings d-flex">
                                            <span><i class="lnr lnr-star"></i></span>
                                            <span><i class="lnr lnr-star"></i></span>
                                            <span><i class="lnr lnr-star"></i></span>
                                            <span><i class="lnr lnr-star"></i></span>
                                            <span><i class="lnr lnr-star"></i></span>
                                            <div class="pro-review">
                                                <span>1 Reviews</span>
                                            </div>
                                        </div>
                                        <div class="price-box">
                                            <span class="price-regular">${goods.goodsPrice*goods.goodsDiscount}</span>
                                            <span class="price-old"><del>${goods.goodsPrice}</del></span>
                                        </div>
                                        <h5 class="offer-text"><strong>Hurry up</strong>! offer ends in:</h5>
                                        <div class="product-countdown" data-countdown="2019/07/25"></div>
                                        <div class="availability">
                                            <i class="fa fa-check-circle"></i>
                                            <span>200 in stock</span>
                                        </div>
                                        <p class="pro-desc">${goods.goodsDesc}</p>
                                        <div class="quantity-cart-box d-flex align-items-center">
                                            <h5>qty:</h5>
                                            <div class="quantity">
                                                <div class="pro-qty"><input name="goodsNum" type="text" value="1"></div>
                                            </div>
                                            <div class="action_link">
                                                <p style="color: #fff;font-size: 14px;padding: 9px 25px;background-color: #CC2121;text-transform: capitalize; " onclick="addCarss(${goods.goodsId})">添加到购物车</p>
                                            </div>
                                        </div>
<%--                                        <div class="color-option">--%>
<%--                                            <h5>color :</h5>--%>
<%--                                            <ul class="color-categories">--%>
<%--                                                <li>--%>
<%--                                                    <a class="c-lightblue" href="#" title="LightSteelblue"></a>--%>
<%--                                                </li>--%>
<%--                                                <li>--%>
<%--                                                    <a class="c-darktan" href="#" title="Darktan"></a>--%>
<%--                                                </li>--%>
<%--                                                <li>--%>
<%--                                                    <a class="c-grey" href="#" title="Grey"></a>--%>
<%--                                                </li>--%>
<%--                                                <li>--%>
<%--                                                    <a class="c-brown" href="#" title="Brown"></a>--%>
<%--                                                </li>--%>
<%--                                            </ul>--%>
<%--                                        </div>--%>
<%--                                        <div class="useful-links">--%>
<%--                                            <a href="#" data-toggle="tooltip" title="Compare"><i--%>
<%--                                                    class="lnr lnr-sync"></i>compare</a>--%>
<%--                                            <a href="#" data-toggle="tooltip" title="Wishlist"><i--%>
<%--                                                    class="lnr lnr-heart"></i>wishlist</a>--%>
<%--                                        </div>--%>
                                        <div class="like-icon">
                                            <a class="facebook" href="#"><i class="fa fa-facebook"></i>like</a>
                                            <a class="twitter" href="#"><i class="fa fa-twitter"></i>tweet</a>
                                            <a class="pinterest" href="#"><i class="fa fa-pinterest"></i>save</a>
                                            <a class="google" href="#"><i class="fa fa-google-plus"></i>share</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- product details inner end -->

                        <!-- product details reviews start -->
                        <div class="product-details-reviews section-space pb-0">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="product-review-info">
                                        <ul class="nav review-tab">
                                            <li>
                                                <a class="active" data-toggle="tab" href="#tab_one">详情描述</a>
                                            </li>
<%--                                            <li>--%>
<%--                                                <a data-toggle="tab" href="#tab_two">information</a>--%>
<%--                                            </li>--%>
<%--                                            <li>--%>
<%--                                                <a data-toggle="tab" href="#tab_three">reviews (1)</a>--%>
<%--                                            </li>--%>
                                        </ul>
                                        <div class="tab-content reviews-tab">
                                            <div class="tab-pane fade show active" id="tab_one">
                                                <div class="tab-one">
                                                    <p>${goods.goodsDesc}</p>
                                                </div>
                                            </div>
<%--                                            <div class="tab-pane fade" id="tab_two">--%>
<%--                                                <table class="table table-bordered">--%>
<%--                                                    <tbody>--%>
<%--                                                        <tr>--%>
<%--                                                            <td>color</td>--%>
<%--                                                            <td>black, blue, red</td>--%>
<%--                                                        </tr>--%>
<%--                                                        <tr>--%>
<%--                                                            <td>size</td>--%>
<%--                                                            <td>L, M, S</td>--%>
<%--                                                        </tr>--%>
<%--                                                    </tbody>--%>
<%--                                                </table>--%>
<%--                                            </div>--%>
<%--                                            <div class="tab-pane fade" id="tab_three">--%>
<%--                                                <form action="#" class="review-form">--%>
<%--                                                    <h5>1 review for <span>Chaz Kangeroo</span></h5>--%>
<%--                                                    <div class="total-reviews">--%>
<%--                                                        <div class="rev-avatar">--%>
<%--                                                            <img src="assets/img/about/avatar.jpg" alt="">--%>
<%--                                                        </div>--%>
<%--                                                        <div class="review-box">--%>
<%--                                                            <div class="ratings">--%>
<%--                                                                <span class="good"><i class="fa fa-star"></i></span>--%>
<%--                                                                <span class="good"><i class="fa fa-star"></i></span>--%>
<%--                                                                <span class="good"><i class="fa fa-star"></i></span>--%>
<%--                                                                <span class="good"><i class="fa fa-star"></i></span>--%>
<%--                                                                <span><i class="fa fa-star"></i></span>--%>
<%--                                                            </div>--%>
<%--                                                            <div class="post-author">--%>
<%--                                                                <p><span>admin -</span> 30 Mar, 2019</p>--%>
<%--                                                            </div>--%>
<%--                                                            <p>Aliquam fringilla euismod risus ac bibendum. Sed sit--%>
<%--                                                                amet sem varius ante feugiat lacinia. Nunc ipsum nulla,--%>
<%--                                                                vulputate ut venenatis vitae, malesuada ut mi. Quisque--%>
<%--                                                                iaculis, dui congue placerat pretium, augue erat--%>
<%--                                                                accumsan lacus</p>--%>
<%--                                                        </div>--%>
<%--                                                    </div>--%>
<%--                                                    <div class="form-group row">--%>
<%--                                                        <div class="col">--%>
<%--                                                            <label class="col-form-label"><span class="text-danger">*</span>--%>
<%--                                                                Your Name</label>--%>
<%--                                                            <input type="text" class="form-control" required>--%>
<%--                                                        </div>--%>
<%--                                                    </div>--%>
<%--                                                    <div class="form-group row">--%>
<%--                                                        <div class="col">--%>
<%--                                                            <label class="col-form-label"><span class="text-danger">*</span>--%>
<%--                                                                Your Email</label>--%>
<%--                                                            <input type="email" class="form-control" required>--%>
<%--                                                        </div>--%>
<%--                                                    </div>--%>
<%--                                                    <div class="form-group row">--%>
<%--                                                        <div class="col">--%>
<%--                                                            <label class="col-form-label"><span class="text-danger">*</span>--%>
<%--                                                                Your Review</label>--%>
<%--                                                            <textarea class="form-control" required></textarea>--%>
<%--                                                            <div class="help-block pt-10"><span--%>
<%--                                                                    class="text-danger">Note:</span>--%>
<%--                                                                HTML is not translated!--%>
<%--                                                            </div>--%>
<%--                                                        </div>--%>
<%--                                                    </div>--%>
<%--                                                    <div class="form-group row">--%>
<%--                                                        <div class="col">--%>
<%--                                                            <label class="col-form-label"><span class="text-danger">*</span>--%>
<%--                                                                Rating</label>--%>
<%--                                                            &nbsp;&nbsp;&nbsp; Bad&nbsp;--%>
<%--                                                            <input type="radio" value="1" name="rating">--%>
<%--                                                            &nbsp;--%>
<%--                                                            <input type="radio" value="2" name="rating">--%>
<%--                                                            &nbsp;--%>
<%--                                                            <input type="radio" value="3" name="rating">--%>
<%--                                                            &nbsp;--%>
<%--                                                            <input type="radio" value="4" name="rating">--%>
<%--                                                            &nbsp;--%>
<%--                                                            <input type="radio" value="5" name="rating" checked>--%>
<%--                                                            &nbsp;Good--%>
<%--                                                        </div>--%>
<%--                                                    </div>--%>
<%--                                                    <div class="buttons">--%>
<%--                                                        <button class="sqr-btn" type="submit">Continue</button>--%>
<%--                                                    </div>--%>
<%--                                                </form> <!-- end of review-form -->--%>
<%--                                            </div>--%>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- product details reviews end -->
                    </div>
                    <!-- product details wrapper end -->
                </div>
            </div>
        </div>
        <!-- page main wrapper end -->
    </main>
    <!-- main wrapper end -->

    <!-- offcanvas search form start -->
    <div class="offcanvas-search-wrapper">
        <div class="offcanvas-search-inner">
            <div class="offcanvas-close">
                <i class="lnr lnr-cross"></i>
            </div>
            <div class="container">
                <div class="offcanvas-search-box">
                    <form class="d-flex bdr-bottom w-100" action="shop" method="post">
                        <input  name="goodsName" type="text" placeholder="请输入关键词">
                        <button class="search-btn"><i class="lnr lnr-magnifier"></i>search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- offcanvas search form end -->

    <!-- offcanvas mini cart start -->
    <div class="offcanvas-minicart-wrapper">
        <div class="minicart-inner">
            <div class="offcanvas-overlay"></div>
            <div class="minicart-inner-content">
                <div class="minicart-close">
                    <i class="lnr lnr-cross"></i>
                </div>
                <div class="minicart-content-box">
                    <div class="minicart-item-wrapper" >
                        <ul id="ppp">
                        </ul>
                    </div>

                    <div class="minicart-pricing-box">
                        <ul id="jq">
                            <li>
                                <span>折扣后</span>
                                <span><strong>￥ 0.00</strong></span>
                            </li>
                            <li>
                                <span>优惠价</span>
                                <span><strong>￥ 0.00</strong></span>
                            </li>
                            <li class="total">
                                <span>总价</span>
                                <span><strong>￥ 0.00</strong></span>
                            </li>
                        </ul>
                    </div>

                    <div class="minicart-button">
                        <p onclick="checkout()"><a href="javascript:void(0)"><i class="fa fa-share"></i> 结账</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Scroll to top start -->
    <div class="scroll-top not-visible">
    </div>
    <!-- Scroll to Top End -->

    <!-- All vendor & plugins & active js include here -->
    <!--All Vendor Js -->
    <script src="assets/js/vendor.js"></script>
    <!-- Active Js -->
    <script src="assets/js/active.js"></script>
    <script src="assets/js/myjs.js"></script>
</body>

</html>
